<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <div class="common-bg" :style="{top: (statusBarHeight - 2) + 'px' }"></div>
    <div style="position: relative; z-index: 2">
      <u-my-layOut :navbarOption="{ bgColor: 'rgba(255,255,255,0)', title: ' ' }" :color="{ statusBarHeightColor: '#f6a5ac' }">
        <template v-slot:header></template>
        <template v-slot:main>
          <div class="p30" style="z-index: 2; position: relative; color: #333">
            <div class="fac">
              <uv-avatar size="110rpx" :src="userInfo.avatar"></uv-avatar>
              <div class="pl30">
                <div class="fz36 fac" style="color: #333; font-weight: 500">
                  {{ communityForm.real_name }}
                  <div class="p1757294107 pt10 pb10 pl20 pr20">社区长</div>
                </div>
                <div class="fz30 pt20" style="color: #333">
                  ID:{{ communityForm.id }}
                </div>
              </div>
            </div>
            <div class="p1757293917">
              <div class="p1757292903 fac jcsb">
                <div class="p1757292913"></div>
                <div class="p1757293093"></div>
                <div class="p1757293314" style="color: #ff5d5b">
                  <div class="fz32 pt30" style="font-weight: 500">
                    邻事豆余额
                  </div>
                  <div @click="viewDescTap()" class="fz30 pt20 pb30" style="color: #9e9f9f; line-height: 1">
                    查看明细
                  </div>
                  <div class="pb30" style="font-weight: 500; text-align: center; line-height: 1">
                    <div style="font-size: 80rpx; display: inline">
                      {{ form.beans || 0 }}
                    </div>
                    <div class="fz42" style="display: inline">豆</div>
                  </div>
                </div>
              </div>
              <div class="p1757293700 f jcsb">
                <div class="p1757293707" @click="viewDescTap('member')">
                  <div class="num">会员数量</div>
                  <div class="fz42 pt20">
                    {{ form.user_num || 0 }}
                  </div>
                </div>
                <div class="p1757293707" @click="viewDescTap('housekeeper')">
                  <div class="num">管家数量</div>
                  <div class="fz42 pt20">
                    {{ form.butler_num || 0 }}
                  </div>
                </div>
                <div class="p1757293707" @click="viewDescTap('merchant')">
                  <div class="num ">商家数量</div>
                  <div class="fz42 pt20">
                    {{ form.merchant_num || 0 }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-slot:footer></template>
      </u-my-layOut>
    </div>
  </div>
</template>

<script>
import myLayOutVue from './components/layOut.vue';
import { personnelOrBeanNum } from '@/api/community.js';
import { communityLeaderDetail } from '@/api/other.js';
export default {
  components: {
    'u-my-layOut': myLayOutVue,
  },
  data() {
    return {
      form: {},
      communityForm: {},
      statusBarHeight: 0
    };
  },
  onShow() {
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {

    }

    personnelOrBeanNum().then((res) => {
      if (res.code === 200) {
        this.form = res.result;
      }
    });
    communityLeaderDetail().then((res) => {
      if (res.code === 200) {
        this.communityForm = res.result;
      }
    });
  },
  methods: {
    viewDescTap(url) {
      if (url) {
        uni.navigateTo({
          url: '/pages-community/' + url,
        });
        return;
      }
      uni.navigateTo({
        url: '/pages-community/munityDesc',
      });
    },
  },
};
</script>

<style>
page {
  background-color: #F7F8F8;
  color: #333333;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";

.bg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 1;
}

.p1757292903 {
  background: linear-gradient(150deg, #ff5a5a 0%, #feb47b 100%);
  box-shadow: 0rpx 10rpx 25rpx 0rpx rgba(255, 126, 95, 0.3);
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  padding: 25rpx;

  .p1757292913 {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    background-color: #fe867a;
    border-radius: 50%;
    bottom: -30rpx;
    left: -30rpx;
    z-index: 1;
  }

  .p1757293093 {
    position: absolute;
    width: 205rpx;
    height: 205rpx;
    background-color: #feb390;
    border-radius: 50%;
    top: -50rpx;
    right: -50rpx;
    z-index: 1;
  }

  .p1757293314 {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
}

.p1757294107 {
  background: #e60012;
  font-weight: 500;
  font-size: 24rpx;
  color: #ffffff;
  display: inline;
  text-align: center;
  border-radius: 25rpx 4rpx 25rpx 4rpx;
  margin-left: 20rpx;
}

.p1757293917 {
  background: #ffffff;
  box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(0, 0, 0, 0.08);
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  padding: 25rpx 20rpx;
  margin-top: 30rpx;
}

.p1757293700 {
  padding-top: 50rpx;

  .p1757293707 {
    font-weight: 500;
    width: 33%;
    text-align: center;

    .num {
      font-weight: 500;
      font-size: 28rpx;
      color: #6b7280;
    }
  }
}
</style>
